<template>
  <view class="design-template">
    <wd-card title="设计模板">
      <view class="flex gap-2 mb-2">
        <view
          v-for="item in templateStyles"
          :key="item.title"
          class="template-item"
          :class="item.key === templateChooseObj.currentTemplate.value ? 'item_active' : ''"
          @tap="onChangeTemplate(item.key)"
        >
          <wd-img
            :src="item.key === templateChooseObj.currentTemplate.value ? item.iconAct : item.icon"
            width="36rpx"
            height="36rpx"
          />
          <text>{{ item.title }}</text>
        </view>
      </view>

      <view class="template-show" @tap="isShowTemplates = true">
        <view class="flex items-center gap-2">
          <wd-img
            :src="
              templateStyles.find((item) => item.key === templateChooseObj.currentTemplate.value)
                ?.iconAct
            "
            width="32rpx"
            height="32rpx"
          />
          {{ templateChooseObj.businessOption.label }} - {{ templateChooseObj.subdivision.label }}
        </view>
        <wd-icon name="arrow-right" size="36rpx" />
      </view>
    </wd-card>

    <!-- 选择面板弹窗 -->
    <wd-action-sheet
      v-model="isShowTemplates"
      title="设计模板"
      :z-index="999"
      root-portal
      @closed="currentTab = TemplateClass.BUSINESS_FORMAT"
    >
      <wd-tabs v-model="currentTab" custom-class="tabs-box">
        <block v-for="item in templateTabs" :key="item.label">
          <wd-tab :title="item.label" :name="item.value" />
        </block>
      </wd-tabs>
      <!-- 内容 -->

      <!-- 业态选择 -->
      <!-- NOTE: 这块为什么不使用v-show 因为小程序上编译v-show（主要和display属性相关，优先级）有问题 -->
      <view
        class="pop-box"
        :style="currentTab === TemplateClass.BUSINESS_FORMAT ? '' : 'display:none;'"
      >
        <view
          v-for="item in businessOptions"
          :key="item.key"
          class="template-item"
          :class="item.key === templateChooseObj.businessOption.value ? 'item_active' : ''"
          @tap="onChangeBusiness(item)"
        >
          {{ item.title }}
        </view>
      </view>
      <!-- 细分类型 -->
      <view
        :style="currentTab === TemplateClass.SUBDIVISION ? '' : 'display:none;'"
        class="pop-box"
      >
        <view
          v-for="item in subdivisionOption"
          :key="item.key"
          class="text-[28rpx] bg-[#f3d6d6] text-center text-[#333333] rounded-sm box-border"
          :class="item.key === templateChooseObj.subdivision.value ? 'item_active' : ''"
          @tap="onChangeSubdivision(item)"
        >
          <wd-img width="164rpx" height="164rpx" :src="item.src" />
          <view class="leading-6">{{ item.title }}</view>
        </view>
      </view>
    </wd-action-sheet>
  </view>
</template>
<script lang="ts" setup>
import { templateSelectDic, type CategoryType, type BaseItem } from "@/utils/dicts";
import { TemplateClass } from "@/utils/enums";

import { useWorkflowStore } from "@/store/index";
import { storeToRefs } from "pinia";

const workflowStore = useWorkflowStore();
const { setTemplateChooseObj } = workflowStore;
const { templateChooseObj, templateStyles } = storeToRefs(workflowStore);

// 选择模板
const onChangeTemplate = (key: number) => {
  setTemplateChooseObj(key, "currentTemplate");
  templateChooseObj.value.currentTemplate.value = key;
  // 赋默认值
  nextTick(() => {
    setTemplateChooseObj(
      {
        label: templateSelectDic[key as keyof typeof templateSelectDic].type[0].title,
        value: templateSelectDic[key as keyof typeof templateSelectDic].type[0].key,
      },
      "businessOption",
    );

    setTemplateChooseObj(
      {
        label: templateSelectDic[key as keyof typeof templateSelectDic].type[0].list[0].title,
        value: templateSelectDic[key as keyof typeof templateSelectDic].type[0].list[0].key,
      },
      "subdivision",
    );
  });
  isShowTemplates.value = true;
};

/* 模板选择面板相关 */
const isShowTemplates = ref<boolean>(false);
const templateTabs = [
  {
    label: "业态选择",
    value: TemplateClass.BUSINESS_FORMAT,
  },
  { label: "细分类型", value: TemplateClass.SUBDIVISION },
];
const currentTab = ref(TemplateClass.BUSINESS_FORMAT);

// 业态选项
const businessOptions = computed(() => {
  return templateSelectDic[
    templateChooseObj.value.currentTemplate.value as keyof typeof templateSelectDic
  ].type;
});

// 业态选择
const onChangeBusiness = (info: CategoryType) => {
  setTemplateChooseObj(
    {
      label: info.title,
      value: info.key,
    },
    "businessOption",
  );
  currentTab.value = TemplateClass.SUBDIVISION;
  nextTick(() => {
    setTemplateChooseObj(
      {
        label: subdivisionOption.value[0].title,
        value: subdivisionOption.value[0].key,
      },
      "subdivision",
    );
  });
};

// 细分类型选项
const subdivisionOption = computed(() => {
  return (
    businessOptions.value.find((item) => item.key === templateChooseObj.value.businessOption.value)
      ?.list || []
  );
});

// 细分类型选择
const onChangeSubdivision = (info: BaseItem) => {
  setTemplateChooseObj(
    {
      label: info.title,
      value: info.key,
    },
    "subdivision",
  );
};
</script>
<script lang="ts">
// 取消小程序样式隔离
export default {
  options: { styleIsolation: "shared" },
};
</script>
<style lang="scss" scoped>
.design-template {
  .template-show {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 2rpx 16rpx;
    color: #c13432;
    background: #f3d6d6;
    border: 2rpx solid #c13432;
  }
}
.template-item {
  position: relative;
  display: flex;
  gap: 16rpx;
  padding: 8rpx 16rpx;
  font-size: 28rpx;
  color: #333333;
  border: 2rpx dashed rgba(51, 51, 51, 0.7);
  border-radius: 16rpx;
  transition: all 0.2s linear;
}
.item_active {
  color: #c13432;
  background: #f3d6d6;
  border: 2rpx solid #c13432;
}
.pop-box {
  @apply flex flex-wrap box-border justify-center;
  gap: 24rpx;
  padding: 24rpx 48rpx;
}
::v-deep .wd-card {
  padding-bottom: 24rpx;
}
</style>
